<template>
  <div class="product-card">
    <div class="card" v-for="product in products" :key="product.productId">
      <!-- 使用 div 或者 a 标签代替 router-link -->
      <div class="card-link" @click="handleClick(product.productId)">
        <VanImage class="product-image" :src="require('@/'+`${product.imageUrl}`)" />
        <p class="variety">{{ product.productName }}</p>
        <p class="introduction">{{ product.description }}</p>
        <p class="price-container">
          <span class="currency">¥  </span>
          <span class="price">{{ product.price }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { Image as VanImage } from 'vant'

export default {
  name: "product-card",
  components: {
    VanImage
  },
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleClick(productId) {
      // 实现导航逻辑
      this.$emit('product-click', productId);
      console.log("商品点击事件触发，商品ID是", productId);

      // 使用程序化导航代替 router-link 的跳转
      this.$router.push({ name: 'PetView', params: { id: productId } });
    }
  }
}
</script>

<style scoped>
.product-card {
  column-count: 2;
  column-gap: 10px;
  padding-bottom: 80px;
}

.card {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 10px;
  width: 100%;
}

.card-link {
  text-decoration: none;
  color: inherit;
}

.product-image {
  width: 100%;
  height: auto;
  display: block;
}

.variety {
  width: 100%;
  text-align: center;
}

.introduction {
  margin-top: 5px;
  color: #999987;
  font-size: 13px;
  padding-left: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-container {
  margin-top: 5px;
  font-weight: bold;
  padding-left: 13px;
  margin-bottom: 10px;
}

.currency {
  color: #f85f0c;
  font-weight: bold;
  font-size: 20px;
}

.price {
  color: #f85f0c;
  font-weight: bold;
  font-size: 30px;
}
</style>
